<template>
    <div>
        <!-- 仪表盘 -->
        <div ref="chartContainer" style="width:150px;height: 150px"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref<any>(null);
const propsRef = defineProps(["AbnormalRate"])
const props = ref<any>(propsRef)

const chartInstance = ref()
const loadData = (value: any) => {
    chartInstance.value = echarts.init(chartContainer.value);

    const option = {
        tooltip: {
            // formatter: '2%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                // 仪表盘标题。
                title: {
                    show: true,  //是否显示标题。
                    offsetCenter: [0, '25%'],  //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                    color: "rgba(89, 89, 89, 1)",   // 文字的颜色
                    fontStyle: "normal",  //文字字体的风格
                    fontFamily: "'sans-serif'",
                    fontSize: 12
                },
                data: [
                    {
                        name: '异常品率',  //数据项的名称
                        value: value, // 数据项值
                        itemStyle: {

                        }
                    }
                ],
                startAngle: "140",   //仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: "-360",  //仪表盘结束角度
                clockwise: true,  //仪表盘刻度是否是顺时针增长。

                // 仪表盘轴线相关配置
                axisLine: {
                    show: true,  //是否显示仪表盘轴线。
                    // 仪表盘轴线样式。
                    lineStyle: {
                        width: 13,  //轴线宽度
                    },
                },

                // 展示当前进度。
                progress: {
                    show: true,
                    width: 13, // 进度条宽度
                    // 进度条样式。
                    itemStyle: {
                        // 图形的颜色
                        color: "rgba(255, 188, 0, 1)",
                    }
                },
                splitLine: {
                    length: 0, // 刻度线长度

                },
                // 刻度样式。
                axisTick: {//用于设置刻度线的样式
                    show: false, // 不显示刻度线
                },

                // 刻度标签
                axisLabel: {  //用于设置刻度数字的样式
                    show: false // 不显示刻度数字
                },

                // 仪表盘指针
                pointer: {   //用于设置指针的样式
                    show: false,  //表示显示指针
                },

                // 仪表盘详情，用于显示数据。
                detail: {
                    show: true,  //是否显示详情。
                    valueAnimation: true,
                    color: "rgba(140, 140, 140, 1)",  //文本颜色，默认取数值所在的区间的颜色。
                    fontWeight: "normal",
                    formatter: "{value}%",
                    offsetCenter: ["0", "-15%"],
                    textStyle: {
                        fontSize: 14 // 调整字体大小
                    }
                },
                // axisPointer: {   //用于设置仪表盘上的指针轴线样式
                //     show: true,   //表示显示指针轴线
                //     length: '90%',  //表示指针轴线的长度占整个仪表盘半径的百分比
                //     width: 8,  //表示指针轴线的宽度
                //     color: 'pink',  //表示指针轴线的颜色为粉色
                // },



            }
        ]
    };

    chartInstance.value.setOption(option);
};
watch(props, value => {
    loadData(value.AbnormalRate);
}, {
    deep: true
})
</script>

<style scoped></style>